<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow,
		onUnload,
		onHide
	} from '@dcloudio/uni-app';
	import {
		getYufasutdyDetailsAPi,
		submitStudyJuziApi
	} from '/api/request.js';
	const props = defineProps({});
	onMounted(() => {});
	const platform = ref({});
	const goback = async () => {
		uni.navigateBack()
	};
	const query = ref({
		gk_id: '',
		page: 1,
		la: true,
		trigger: false,
		total: 1
	});
	const list = ref(null);
	const fetchList = async (type = true) => {
		try {
			uni.showLoading({
				mask: true
			});
			let res = await getYufasutdyDetailsAPi(query.value);
			if (!type || !list.value) {
				list.value = [];
			}
			console.log(res);
			res.data.list.map((item) => {
				list.value.push(item);
			});
			query.value.total = res.data.count;
			if (query.value.page * 10 >= query.value.total) {
				query.value.la = false;
			} else {
				query.value.la = true;
			}
		} catch (error) {
			console.log(error);
		}
	};
	onLoad(async (e) => {
		platform.value = uni.getStorageSync('platform');
		query.value.gk_id = e.id;
		fetchList().finally(() => {
			uni.hideLoading();
		})
	});
	const handlePullDownRefresh = () => {
		if (query.value.la) {
			query.value.page += 1;
			fetchList(true).finally(() => {
				uni.hideLoading();
			})
		}
	};
	const handleReachBottom = () => {
		query.value.page = 1;
		query.value.trigger = true;
		fetchList(false).finally(() => {
			query.value.trigger = false
			uni.hideLoading();
		});
	};
	const stautss = ref({
		id: '',
		num: 0
	})
	const play = (id) => {
		if (stautss.value.id == id) {
			if (stautss.value.num === 1) {
				stautss.value.num = 2;
			} else if (stautss.value.num === 2) {
				stautss.value.num = 3;
			} else {
				stautss.value.num = 1;
			}
			console.log(stautss.value);
		} else {
			stautss.value.id = id;
			stautss.value.num = 1;
		}
	};

	const returnClass = (id) => {
		if (id == stautss.value.id && stautss.value.num == 1) return 'active'
		if (id == stautss.value.id && stautss.value.num == 2) return 'default'
		if (id == stautss.value.id && stautss.value.num == 2) return 'kong'
	}
	const noSelectList = ref([]);
	const selectList = ref([]);
	const changeSelectList = (id, type) => {
		if (type == 1) {
			//不会
			const index = noSelectList.value.findIndex((item) => item == id);
			if (index == -1) {
				noSelectList.value.push(id);
			}
			const indexs = selectList.value.findIndex((item) => item == id);
			if (indexs != -1) {
				selectList.value.splice(indexs, 1);
			}
		} else {
			const index = selectList.value.findIndex((item) => item == id);
			if (index == -1) {
				selectList.value.push(id);
			}
			const indexs = noSelectList.value.findIndex((item) => item == id);
			if (indexs != -1) {
				noSelectList.value.splice(indexs, 1);
			}
		}
	};
	const getSelectId = (id) => {
		return selectList.value.includes(id);
	};
	const getNoSelectId = (id) => {
		return noSelectList.value.includes(id);
	};
	const tijiao = async () => {
		// if ((selectList.value.length + noSelectList.value.length) != list.value.length) {
		// 	uni.showToast({
		// 		title: '语句还未检测完成',
		// 		icon: 'none'
		// 	})
		// 	return
		// }
		if (!noSelectList.value.length) {
			uni.showToast({
				title: '请选择不会的语句开始学习检测',
				icon: 'none'
			})
			return
		}
		uni.redirectTo({
			url: '/pages/yufa/components/fuxi?huide=' + selectList.value.join(',') + '&buhuide=' +
				noSelectList.value.join(',') + '&id=' + query.value.gk_id
		})
	}
</script>

<template>
	<view class="wrap uni-col" :style="{
            height: platform.gaodu + 'rpx'
        }">
		<view class="header-wrap uni-row" :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title"> 语句识记 </view>
			<image class="left" style="opacity: 0" src="/static/img/goback-black.png" mode="widthFix" />
		</view>
		<scroll-view @scrolltolower="handlePullDownRefresh" refresher-enabled="true"
			:refresher-triggered="query.trigger" @refresherrefresh="handleReachBottom" v-if="list && list.length"
			class="body" :style="{ height: platform.gaodu - platform.dingbu - 96-88-40-20 + 'rpx' }" :scroll-y="true">
			<view style="height: 20rpx;" class="">

			</view>
			<view class="item uni-col" v-for="(item,index) in list" :key="index" @click="play(item.id)"
				:class="returnClass(item.id)">
				<view class="title">
					{{item.title}}
				</view>
				<view class="titles">
					{{item.words}}
				</view>
				<view class="titless">
					{{item.description}}
				</view>
				<view class="right uni-row">
					<view class="items uni-row" v-for="(i, iIndex) in ['会', '不会']" :key="iIndex"
						@click.stop="changeSelectList(item.id, iIndex)" :class="
				                            iIndex == 0 && getSelectId(item.id)
				                                ? 'default'
				                                : iIndex == 1 && getNoSelectId(item.id)
				                                ? 'active'
				                                : ''
				                        ">
						<image :src="
				                                iIndex == 0
				                                    ? '/static/img/wolrd/default-dui.png'
				                                    : '/static/img/wolrd/default-cuo.png'
				                            " class="icon s"></image>
						<image :src="
				                                iIndex == 0
				                                    ? '/static/img/wolrd/dui.png'
				                                    : '/static/img/wolrd/cuo.png'
				                            " class="icon ss">
						</image>
						{{ i }}
					</view>
				</view>
			</view>
			<view style="height: 20rpx;" class="">
			</view>
		</scroll-view>
		<view class="btn uni-row" @click="tijiao">
			提交
		</view>
		<view class="nothing" v-if="list && list.length < 1">
			<image src="/static/img/nothing.png" class="img"></image>
			<view class="label"> 哎呀，这里什么内容都没有 </view>
		</view>
	</view>
</template>

<style scoped lang="less">
	.wai {
		width: 606rpx;
		height: 378rpx;
		background: #f4eeff;
		border-radius: 64rpx;
		padding: 48rpx 96rpx;
		text-align: center;
		color: #333333;

		.title {
			font-size: 32rpx;
		}

		.label {
			font-size: 28rpx;
			margin: 36rpx 0 56rpx;
		}

		.footer {
			justify-content: space-between;

			.bt {
				width: 184rpx;
				height: 68rpx;
				font-size: 24rpx;
				line-height: 68rpx;
				border-radius: 36rpx;
			}

			.fou {
				color: #9561f3;
				border: 2rpx solid #9561f3;
			}

			.shi {
				background: #9561f3;
				color: #fff;
			}
		}
	}

	.wrap {
		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 24rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-left: 32rpx;
			}
		}

		.body {
			padding: 0 28rpx;

			.item {
				width: 694rpx;
				height: 262rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 16rpx;
				font-weight: 500;
				font-size: 32rpx;
				padding: 70rpx 28rpx;

				.right {
					justify-content: flex-end;
					margin-top: 20rpx;

					.items {
						width: 90rpx;
						justify-content: center;
						margin-left: 10rpx;
						height: 48rpx;
						font-size: 24rpx;
						color: #999999;

						.icon {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
						}

						.ss {
							display: none;
						}

						&.active {
							.s {
								display: none;
							}

							.ss {
								display: block;
							}
						}

						&.default {
							.ss {
								display: block;
							}

							.s {
								display: none;
							}
						}
					}
				}

				&.active {
					.title {
						display: none;
					}

					.titles {
						display: block;
					}
				}

				&.default {
					.title {
						display: none;
					}

					.title {
						display: none;
					}

					.titless {
						display: block;
					}
				}

				&:last-child {
					margin-bottom: 0;
				}

				.title {
					color: #B3B3B3;
				}

				.titles,
				.titless {
					display: none;
				}
			}
		}

		.btn {
			position: fixed;
			bottom: 30rpx;
			left: 50%;
			transform: translate(-50%, 0);
			width: 610rpx;
			justify-content: center;
			height: 88rpx;
			background: #9561F3;
			border-radius: 16rpx;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>